<html>

<head>
    <link rel="stylesheet" href="../normalize.css">
    <link rel="stylesheet" href="../index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- 在 HTML 中是 kebab-case 的 -->
        <blog-post post-title="hello!"></blog-post>
    </div>
</body>

<script type="text/javascript">
    //HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。
    //这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 
    //kebab-case (短横线分隔命名) 命名：

    Vue.component('blog-post', {
        // 在 JavaScript 中是 camelCase 的
        props: ['postTitle'],
        template: '<h3>{{ postTitle }}</h3>'
    })
    //重申一次，如果你使用字符串模板，那么这个限制就不存在了。
</script>

</html>